<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 当一段JS脚本要执行时:
// 1.JS引擎先解析这段代码,将同步程序按照执行顺序加入执行栈(Call Stack)并按顺序执行
// 2.JS引擎遇到异步程序时,并不会立即执行对应的回调函数,而是将回调函数加入事件队列等待被调用
// 3.当JS引擎执行完成当前同步程序之后(JS引擎空闲),从事件队列中取出排在前面的回调函数加入执行栈并调用函数
// 4.调用异步的回调函数时,函数内部又可能有同步程序和异步程序,重复上面的123
// 以上步骤反复循环执行即事件循环


// 事件队列:[fn1]
// 执行栈:
// console.log( 1 );
// setTimeout(); -> 告诉计时器线程给fn1计时0毫秒
// console.log( 3 );
// JS引擎空闲,从事件队列中取出fn1并调用
// fn1()
    // console.log( 2 );

// console.log( 1 );
// setTimeout(function fn1(){
//     console.log( 2 );
// },0)
// console.log( 3 );


// 事件队列:[fn1,fn2]
// 执行栈:
// console.log( 1 );
// setTimeout(); -> fn1加入事件队列
// console.log( 5 );
// JS引擎空闲,从事件队列中取出fn1并调用
// fn1()
    // console.log( 2 );
    // setTimeout(); -> fn2加入事件队列
    // console.log( 4 );
// JS引擎空闲,从事件队列中取出fn2并调用
// fn2()
    // console.log( 3 );

// console.log( 1 );
// setTimeout(function fn1(){
//     console.log( 2 );
//     setTimeout(function fn2(){
//         console.log( 3 );
//     })
//     console.log( 4 );
// },0)
// console.log( 5 );


// 不同的异步任务之间有执行优先级的区别: 优先执行微任务
// 不同的异步任务可以分为: 微任务和宏任务
// 微任务: Promise
// 宏任务: 计时器,ajax请求,click事件...


// 微队列: [f3]
// 宏队列: [f1]
// 执行栈:
// setTimeout(); -> f1加入宏队列
// new Promise()
// f2()
    // console.log( 2 );
    // resolve(); -> Promise对象状态改变为成功,f3加入微队列
// then()指定成功的回调
// console.log( 4 );
// JS引擎空闲,优先处理微队列
// f3()
    // console.log( 3 );
// JS引擎空闲,优先处理微队列,微队列已清空,处理宏队列
// f1()
    // console.log( 1 );

// setTimeout(function (){// f1 异步
//     console.log( 1 );
// },0)
// new Promise((resolve,reject)=>{// f2
//     console.log( 2 );
//     resolve();
// })
// .then(()=>{// f3 异步
//     console.log( 3 );
// })
// console.log( 4 );
// 2 4 3 1


setTimeout(()=>{
    console.log( 0 );
})
new Promise((resolve,reject)=>{
    console.log( 1 );
    resolve();
})
.then(()=>{
    console.log( 2 );
    new Promise((resolve,reject)=>{
        console.log( 3 );
        resolve();
    })
    .then(()=>{
        console.log( 4 );
    })
    .then(()=>{
        console.log( 5 );
    })
})
.then(()=>{
    console.log( 6 );
})
new Promise((resolve,reject)=>{
    console.log( 7 );
    resolve();
})
.then(()=>{
    console.log( 8 );
})

</script>
</body>
</html>